<template>
	<view class="register">
		<view class="login-input flex-center">
			<input placeholder="请输入手机号" v-model="phoneNumber" type="number" placeholder-class="placeholder" />
		</view>
		<view class="login-input flex-center-between code">
			<input placeholder="请输入验证码" v-model="code" placeholder-class="placeholder" />
			<button
				class="code-btn"
				:disabled="codeBtn.waitingCode"
				@tap="sendCode">
				{{codeBtn.text}}
			</button>
		</view>
		<view class="login-input flex-center">
			<input placeholder="设置6-12位密码" v-model="passwd" password=true placeholder-class="placeholder" />
		</view>
		<view class="login-input flex-center">
			<input placeholder="确认新密码" v-model="confirmPwd" password=true placeholder-class="placeholder" />
		</view>
		<view class="login-input flex-center">
			<input placeholder="请输入渠道码（选填）" v-model="channelCode" placeholder-class="placeholder" />
		</view>
		<view class="submit-btn" >
			<button @click="submit">注册</button>
		</view>
		<view class="nav">
			已有密码？
			<text class="nav-login" @click="pageTo('login')">点击登录</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneNumber: uni.getStorageSync('PHONE') || '',
				code: '',
				passwd:'',
				confirmPwd: '',
				channelCode: '',
				seconds: 60,
				codeBtn: {
					text: '获取验证码',
					waitingCode: false,
					count: this.seconds
				}
			}
		},
		onLoad() {

		},
		methods: {
			/**
			 * 注册
			 */
			async submit() {
				if (!this.checkPhone()) return false
				if (!this.checkPsw()) return false
				if (!this.checkPswConfirm()) return false
				let res = await this.$http.request({
					method: 'post',
					url: '/api/account/register',
					data: {
						username: this.phoneNumber,
						captcha: this.code,
						password: this.passwd,
						rep_password: this.confirmPwd,
						referrer: this.channelCode,
					}
				})
				if (res.status === 1) {
					uni.setStorageSync('USER_INFO', res.data.userinfo)
					uni.setStorageSync('PHONE', this.phoneNumber)
					uni.switchTab({url: '/pages/user/user'})
					uni.showToast({
						title: '注册成功',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			
			/**
			 * 发送验证码
			 */
			async sendCode() {
				if (!this.checkPhone()) return false
				let res = await this.$http.request({
					method: 'post',
					url: '/api/sms/captcha',
					data: { mobile: this.phoneNumber }
				})
				if (res.status === 1) {
					this.codeBtn.waitingCode = true;
					this.codeBtn.count = this.seconds;
					this.codeBtn.text = this.codeBtn.count + 's后获取';
					
					let countdown = setInterval( () => {
						this.codeBtn.count--;
						this.codeBtn.text = this.codeBtn.count + 's';
						if( this.codeBtn.count < 0 ){
							clearInterval(countdown);
							this.codeBtn.text = '重新发送';
							this.codeBtn.waitingCode = false;
						}
					}, 1000)
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			
			/**
			 * 校验手机号
			 */
			checkPhone() {
				if (!(/^1[3456789]\d{9}$/.test(this.phoneNumber))){
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'none'
					})
					return false
				} else return true
			},
			
			/**
			 * 校验密码
			 */
			checkPsw() {
				if (!(/^[a-zA-Z0-9]{6,12}$/.test(this.passwd))){
					uni.showToast({
						title: '请输入由字母与数字组成的6～12位密码',
						icon: 'none'
					})
					return false
				} else return true
			},
			
			/**
			 * 校验确认密码
			 */
			checkPswConfirm() {
				if (this.passwd !== this.confirmPwd) {
					uni.showToast({
						title: '两次密码不一致',
						icon: 'none'
					})
					return false
				} else return true
			},
			
			/**
			 * 跳转
			 * @param {String} page
			 */
			pageTo(page){
				uni.hideKeyboard()
				uni.navigateTo({
					url: page
				});
			}
		}
	}
</script>

<style lang="scss">
	.register {
		box-sizing: border-box;
		height: 100%;
		padding: 50rpx 50rpx 0;
		background: $uni-bg-color;
		.login-input{
			height: 90rpx;
			border-bottom: 1rpx solid $uni-border-color;
			margin-top: 30rpx;
			input{
				width: 100%;
			}
		}
		.code{
			&-btn{
				height: 54rpx;
				width: 300rpx;
				line-height: 54rpx;
				margin: 0;
				font-size: $uni-font-size-sm2;
				color: $uni-text-color-inverse;
				background: $uni-color-theme;
			}
		}
		.placeholder{
			color: $uni-text-color-placeholder;
		}
		.nav {
			text-align: center;
			color: $uni-text-color-grey;
			font-size: $uni-font-size-sm2;
			&-login{
				color: $uni-color-theme;
			}
		}
	}
</style>
